/* Reset */
 
 body {
     margin: 0;
     padding: 0;
     font-family: 'Inter', sans-serif;
     background-color: #fdfdfd;
     color: #222;
 }
 /* Header */
 
 .header {
     text-align: center;
     background-color: #fff0f5;
     padding: 20px 10px;
     border-bottom: 1px solid #ccc;
 }
 
 .logo {
     max-height: 60px;
     width: auto;
     margin-bottom: 10px;
 }
 
 h1 {
     font-size: 24px;
     color: #d63384;
     margin: 10px 0 5px;
 }
 
 h2 {
     font-size: 18px;
     color: #6f42c1;
 }
 
 h4,
 h6 {
     color: #555;
 }
 
 p {
     margin-top: 10px;
     font-size: 15px;
 }
 /* Filter Bar */
 
 .filter-bar {
     margin: 20px auto;
     text-align: center;
 }
 
 #city-filter {
     padding: 10px;
     font-size: 16px;
     border-radius: 8px;
     border: 1px solid #ccc;
     width: 280px;
 }
 /* Profile Cards */
 
 #profiles-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 20px;
     padding: 20px;
 }
 
 .profile-card {
     background: #fff;
     border-radius: 18px;
     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
     overflow: hidden;
     transition: transform 0.3s ease;
     position: relative;
 }
 
 .profile-card:hover {
     transform: scale(1.03);
 }
 
 .profile-image {
     width: 100%;
     height: 280px;
     object-fit: cover;
     border-radius: 18px 18px 0 0;
 }
 
 .card-link {
     text-decoration: none;
     color: inherit;
     padding: 15px;
     display: block;
 }
 
 .profile-name {
     font-weight: bold;
     text-align: center;
     font-size: 20px;
     margin-bottom: 5px;
     color: #d63384;
 }
 
 .profile-profession,
 .profile-city {
     font-size: 14px;
     color: #666;
     text-align: center;
 }
 
 .profile-tags {
     display: flex;
     justify-content: center;
     gap: 6px;
     margin-top: 8px;
     flex-wrap: wrap;
 }
 
 .tag {
     font-size: 11px;
     padding: 4px 10px;
     border-radius: 16px;
     color: #fff;
     text-transform: uppercase;
     font-weight: bold;
 }
 
 .tag.vip {
     background: linear-gradient(45deg, #ffd700, #ffa500);
     color: #000;
 }
 
 .tag.premium {
     background-color: #9b59b6;
 }
 
 .tag.new {
     background-color: #e91e63;
 }
 
 .tag.hot {
     background-color: #f44336;
 }
 
 .tag.trending {
     background-color: #2196f3;
 }
 /* Extra Content */
 
 .extra-content {
     padding: 20px;
     background-color: #fef6fa;
     margin-top: 30px;
     border-top: 1px solid #ddd;
 }
 
 .video-gallery iframe {
     margin-bottom: 15px;
     border-radius: 12px;
 }
 
 .whatsapp-links li {
     margin-bottom: 8px;
 }
 
 .whatsapp-links a {
     color: #25d366;
     font-weight: bold;
     text-decoration: none;
 }
 /* Keywords Section */
 
 .city-keywords-section {
     background: #f9f9f9;
     padding: 20px;
     margin-top: 30px;
     border-top: 1px solid #ccc;
 }
 
 .city-keywords-section strong {
     color: #d63384;
 }
 /* Footer */
 
 footer {
     text-align: center;
     padding: 15px;
     background: #f0f0f0;
     font-size: 13px;
     color: #555;
     margin-top: 30px;
 }
 /* Floating Buttons */
 
 .floating-whatsapp,
 .floating-call {
     position: fixed;
     right: 20px;
     padding: 12px 16px;
     border-radius: 30px;
     font-weight: bold;
     font-size: 14px;
     color: white;
     z-index: 100;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
     text-decoration: none;
     transition: background 0.3s ease;
 }
 
 .floating-whatsapp {
     bottom: 80px;
     background: #25d366;
 }
 
 .floating-call {
     bottom: 30px;
     background: #007bff;
 }
 
 .floating-whatsapp:hover {
     background: #128c7e;
 }
 
 .floating-call:hover {
     background: #0056b3;
 }
 
 @media (max-width: 768px) {
     .logo {
         max-height: 40px;
     }
     h1 {
         font-size: 20px;
     }
     h2 {
         font-size: 16px;
     }
     .profile-image {
         height: 220px;
     }
 }
 
 .responsive-video {
     position: relative;
     padding-bottom: 56.25%;
     height: 0;
     overflow: hidden;
 }
 
 .responsive-video iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 50%;
     height: 50%;
     border: 0;
 }
 
 #profile-loader {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 30px 10px;
     font-size: 18px;
     font-weight: bold;
     color: #cc0033;
     /* Matches your red */
 }
 
 .spinner {
     width: 50px;
     height: 50px;
     border: 6px solid #eee;
     border-top: 6px solid #cc0033;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin-bottom: 12px;
 }
 
 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
 }